<div class="zone-tool-bar" fxLayout="row" fxLayoutAlign="space-between center">
  <div fxFlex="50">
    <mat-form-field fxFlex="50">
      <mat-select
        (selectionChange)="onZoneDefinitionSelected()"
        [(ngModel)]="zoneDefinitionSelected"
        aria-label="Zone selection"
        id="zoneDefinitionSelection">
        <mat-option *ngFor="let zoneDef of zoneDefinitions;" [value]="zoneDef">
          {{zoneDef.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <span fxFlex="5"></span>
    <span fxFlex="45" fxFlexAlign="center">{{currentZonesLength}} zones</span>
  </div>

  <div fxFlex="50" fxLayout="row" fxLayoutAlign="end center">
    <mat-form-field fxFlex="15">
      <input
        (change)="onStepChange()"
        [(ngModel)]="zoneDefinitionSelected.step"
        matInput
        matTooltip="Enter step precision for increase/decrease zone start/end values. For example 0.1, 0.01, 0.001, 0.25, ..."
        type="number" />
    </mat-form-field>

    <button (click)="onAddLastZone()" id="addLastZone" mat-icon-button matTooltip="Add a last zone">
      <mat-icon fontSet="material-icons-outlined">add</mat-icon>
    </button>

    <button (click)="onRemoveLastZone()" id="removeLastZone" mat-icon-button matTooltip="Remove the last zone">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </button>

    <button (click)="onResetZonesToDefault()" id="resetZonesToDefault" mat-icon-button
            matTooltip="Reset zones to default">
      <mat-icon fontSet="material-icons-outlined">refresh</mat-icon>
    </button>

    <button (click)="onImportZones()" id="importZones" mat-icon-button matTooltip="Import zones from a backup">
      <mat-icon fontSet="material-icons-outlined">vertical_align_top</mat-icon>
    </button>

    <button (click)="onExportZones()" id="exportZones" mat-icon-button matTooltip="Export for backup/sharing">
      <mat-icon fontSet="material-icons-outlined">vertical_align_bottom</mat-icon>
    </button>
  </div>

</div>
